今天很高興與榮幸的來幫大家討論一下上周的五篇JS忍之道文章，上周總共有以下五篇

一、我就是不要用jquery、就是不要用套件~歡迎病得不輕有志想練苦工的人，想學速成效果的人麻煩請點下一道主題菜，謝謝
二、JS默世路(JQuery)
三、Greensock-簡單、效能強的animation library
四、遊戲引擎 Cocos2d-html5
五、5個超讚JavaScript Library，立馬提升 JS 戰力

主題似乎大都聚焦在前端的動畫製作上，我對這類議題其實也相當的有興趣，人類天生就喜歡會動的東西，我們喜歡看動畫、卡通，在介面設計上我們也經常會看到許多動態被用在頁面元素以及場景轉換上，動，不只是因為有趣，動的技巧使用得當的話，可以讓他們與人類所熟悉的物理世界產生聯結、更清晰的被感知度、更充分的前後文脈絡資訊。

迪士尼的動畫師Ollie Johnston與Frank Thomas曾經出過一本書，書名叫作The Illusion of Life: Disney Animation，書內的容主要是分享迪士尼在多年製作動畫的過程中所取得的經驗，非常經典，他倆在書中提出了十二條動畫設計上的準則，像是

一、Squash and stretch
使用來呈現物體的僵固性
有機體的物理感覺
例如Flipboard翻書的感覺 v.s iBook的擬真設計的翻頁感
二、Anticipation
物件即將發生動作的起手勢
給予使用者操作介面即將產生變化的提示，尤其在手勢UI上，給予操作體驗將進行的方向與轉移速度
三、Staging
在動畫設計上，正確的場景轉移是說好故事的一個重要技巧，正確的角度、光影
四、Straight ahead and pose-to-pose
五、Follow through and overlapping action
物件主體與其附屬物件以不同的速度、方向運動著
更強烈、真實的物理世界模擬，更自然的動態呈現
六、Slow in and out
物理的慣性定律
物體在移動前需要時間進行加速，同樣的在完全停止前需要時間減速
行動裝置上LIST UI的卷軸滾動效果就是讓捲軸滾動的速度去反應使用者在物理上的操作，手勢Swipe
的速度愈快，捲軸滾動的加速度也愈快，捲動的範圍、距離也更廣、更長
七、Arcs
弧形移動軌跡
通常在物理世界中，物體的移動鮮少是隨機的，通常會受到許多外力去進行相對可預測性的移動，像是推力、風阻、重力
機械性的物體移動通常是直線的，反之有機體的移動軌跡通常會是弧形的
八、Secondary action
次要韻律？通常用來強化主體的移動效果、增強情感的表現，同時卻也要避免影響到使用者對主體運動的注意力
九、Timing
Timing給予了"移動"意義，不論是物理上的還是情感上，想像一下滾動中的球撞擊另一個物體，如果 球能撞開該物體，移動上勢必看起來較沉轉速也會比較慢，反之如果球被該物體反彈開，球在滾動的過程中的轉速勢必較高，移動速度也會較快

以上簡單的摘要其中幾項，在過去很長的一段時間，要在瀏覽器上實做出動畫其實是相當之困難的，因為Web被創造出來時，他的目的上是去做為文件資料交換的一個工具，動畫要被呈現出來所需要的條件Web、瀏覽器並不俱備，也因此有很長的一段時期，這類的需求被Flash、Sliverlight、Unity這類的第三方插件所遞補。

時至今日，隨著許多新的網路應用開發規範逐漸被制定完成，HTML5 Canvas、HTML5 Audio AP、HTML5 video / audioI、WebGL、SVG、WebSocket、WebRTC等等，要在Web上用原生的方式去開發多媒體應用與互動式應用漸漸的蔚為主流，但是這些API大都非常的底層，沒有工具輔助的話要開發者去使用在實務上也不是很有效率，上週的文章"我就是不要用jquery、就是不要用套件~歡迎病得不輕有志想練苦工的人，想學速成效果的人麻煩請點下一道主題菜，謝謝"是用硬幹的方式實作了一個HTML5 Canvas的應用，這當然很好，某些情境下這種硬漢式編程法當然OK，開發者也可以更瞭解許多細節，但是當應用複雜到了一個程度的時候，尤其是要處理的物理特性的情況下可能就會有些太硬核了，在產品推出與瞭解開發細節上可能得有取捨，除了這種直接取用底層canvas API的開發方式之外，也有一位朋友使用到了知名的2D物理引擎Cocos2d-HTML5來進行HTML5 canvas應用的實作，也有很詳細的介紹，最後除了這些新穎的繪圖API之外，還有位朋友用了GSAP JS去進行動畫的設計，GSAP JS主要是透過操控DOM加上CSS3新的動畫功能(例如：-webkit-transform: matrix(1, 0, 0.7071, 0.7071, 0, 0))去進行Web動畫的實作，在做轉場上非常的堪用，但老實說不是很清楚拿來用在遊戲、複雜互動設計上的FPS是否可以保證60就有點存疑了，最後"5個超讚JavaScript Library，立馬提升 JS 戰力"評析了目前幾個主流的前後端開發工具，像是Grunt.js我本身就有在用，他是一個Web專案資產管理的Lib，可以輕鬆將JS、CSS一些Routine的工作，像是合併、壓縮、混亂化、JS Lint等等，超好用，另外還提到了Bower，一個JS相依性、版本管理的套件，在專案開發上相當的有幫助，以上簡單的綜合評析了一下，我們選出"5個超讚JavaScript Library，立馬提升 JS 戰力"作為獲獎人員，也感謝諸位筆者精湛的分享。